<template>
	<s-layout title="群资料编辑" :bgStyle="{
		color:'#F6F6F6'
	}">
	<view class="ss-p-t-35 ss-flex flex-column justify-center align-center">
		<view class="edit-logo" @click="editLogo">
			<image class="edit-logo-image"
				:src="cdn(avatar) || 'https://liuliangbenben.oss-cn-hangzhou.aliyuncs.com/20231117163016c941b7397.png'"
				mode="aspectFill"></image>
			<view class="edit-text">修改</view>
		</view>
		<view class="edit-item ss-m-t-60">
			<view class="edit-title ss-m-b-18">群聊名称</view>
			<input class="edit-name ss-p-x-20" v-model="name" type="text" placeholder="请输入群聊名称"
				placeholder-style="color: #C0C0C0;" />
		</view>
		<view class="edit-item ss-m-t-60">
			<view class="edit-title ss-m-b-18">群公告</view>
			<textarea v-model="introduction" disable-default-padding class="edit-notice ss-p-20" placeholder="请输入群公告"
				placeholder-style="color: #C0C0C0;" />
		</view>
		<view class="edit-btn" @click="save">保存</view>
	</view>
	</s-layout>
</template>

<script setup>
	import {
		ref,
		reactive,
		computed,
	} from 'vue';
	import {
		onLoad,
		onUnload
	} from '@dcloudio/uni-app';
	import sheep from '@/sheep';
	import {
		cdn,
		udid
	} from '@/im/config/index.js'
	import $store from '@/im/store/im';
	import imApi from '@/im/api/index.js'

	const avatar = ref('')
	const name = ref('')
	const introduction = ref('')

	onLoad(() => {
		avatar.value = $store().groupInfo.groupProfile.avatar
		introduction.value = $store().groupInfo.groupProfile.introduction
		name.value = $store().groupInfo.groupProfile.name
	})


	const editLogo = () => {
		uni.chooseImage({
			async success(chooseImageRes) {
				const tempUrl = chooseImageRes.tempFilePaths[0];
				const res = await uploadFile(tempUrl)
				avatar.value = res.fullurl
			},
		});
	}

	const save = () => {
		wx.$app.updateGroupProfile({
			groupID: $store().groupInfo.groupProfile.groupID,
			name: name.value,
			notification: introduction.value,
			avatar: avatar.value
		}).then(res => {
			uni.$emit('updateChatGroupTitle', res.data.group);
			uni.$emit('updateGroup', res.data.group)
			uni.showToast({
				title: '修改成功',
				icon: 'none',
				duration: 1500,
				success() {
					setTimeout(() => {
						uni.navigateBack()
					}, 1500)
				}
			})
		})
	}

	const uploadFile = (file) => {
		return new Promise((resolve,reject)=>{
			uni.uploadFile({
				url: 'https://api-beta-zjf.zhongjingfa.com/file/api/file',
				filePath: file,
				name: 'file',
				formData: {
					group: 'ugc',
				},
				header: {
					Accept: 'text/json',
				},
				success: (uploadFileRes) => {
					let result = JSON.parse(uploadFileRes.data);
					resolve(result.data);
				},
				fail: (error) => {
					console.log('上传失败：', error);
					return resolve(false);
				},
			});
		})
	}
</script>

<style scoped lang="scss">
	view {
		box-sizing: border-box;
	}

	.edit-logo {
		width: 208rpx;
		height: 208rpx;
		border-radius: 8rpx;
		position: relative;

		.edit-logo-image {
			width: 208rpx;
			height: 208rpx;
			border-radius: 8rpx;
		}

		.edit-text {
			width: 208rpx;
			height: 44rpx;
			background: rgba(0, 0, 0, 0.36);
			border-radius: 0 0 8rpx 8rpx;
			position: absolute;
			right: 0;
			bottom: 0;
			font-weight: 500;
			font-size: 24rpx;
			color: #FFFFFF;
			line-height: 44rpx;
			text-align: center;
		}
	}

	.edit-item {
		.edit-title {
			font-weight: 350;
			font-size: 28rpx;
			color: #3D3D3D;
		}

		.edit-name {
			width: 710rpx;
			height: 106rpx;
			background: #FFFFFF;
			border-radius: 8rpx;
			font-weight: 350;
			font-size: 28rpx;
			line-height: 106rpx;
			box-sizing: border-box;
		}

		.edit-notice {
			width: 710rpx;
			height: 220rpx;
			background: #FFFFFF;
			border-radius: 8rpx;
			box-sizing: border-box;
			font-weight: 350;
			font-size: 28rpx;
		}
	}

	.edit-btn {
		width: 710rpx;
		height: 84rpx;
		background: #FFFFFF;
		border-radius: 40rpx;
		margin-top: 130rpx;
		font-weight: 350;
		font-size: 28rpx;
		color: #3D3D3D;
		line-height: 84rpx;
		text-align: center;
	}
</style>